@charset "utf-8";
/* CSS Document */

html, body { height:100%; }

body{
    background-color:#dc8;
    font-size:16px;
    margin:0;
    padding:0;
    overflow-y: hidden;
}

#header{
    background-color:#333;
    height:10%;
    min-height:50px;
}

#left{
    float:left;
    width:20%;
    background-color:#ccc;
    min-height:625px; /* for modern browsers */
    height:100% !important; /* for modern browsers */
    overflow:hidden;
}

#upper-left{
    margin-right: -18px;
    //min-height:px; /* for modern browsers */
    height:77% !important; /* for modern browsers */
    overflow:auto;
    z-index:1;
}

#left h3{
    text-align: center;
}

#upper-left img{
    width: 100%;
    border: 1px solid #03F;
}

div.left {
    float: left;
    //margin-right: 40px;
    width: 37%;
    //margin-bottom: 30px;
    margin: 10px;
    height: 120px;
}

div.left p {
    text-align: center;
    margin: auto;
}

#lower-left{
    width:100% !important;
    height: 10%;
    min-height: 90px;
    text-align:center;
    z-index:2;
    padding-top:10px;
}

#center {
    margin-left:20%;
    background-color:#F36;
    min-width:800px; /* for modern browsers */
    min-height:625px; /* for modern browsers */
    height:100% !important; /* for modern browsers */
    overflow: hidden !important;
}

#footer {
    clear:both;
    background-color:#333;
    height:10%;
    min-height:50px;
}

#upper-center {
    background-color:#ccc;
    height:76.5%;
    min-height:450px;
}

#caption{
    width: 100%;
    height: 40px !important;
    padding-top: 10px;
    color: #0000ff;
    font-weight: bold;
}

#main-img{
    vertical-align:middle;
    margin-left:auto;
    margin-right:auto;
    border: 7px solid #000;
    filter: chroma;
    max-width: 90%;
    max-height: 80%;
}

#images {
    background-color:#ccc;
    height:20%;
    min-height:125px;
    overflow: auto;
}

.border{
    border:1px solid #fff;
}

.small-image{
    float:left;
    height:100px;
    padding:5px;
    border:1px solid;
    background-color:yellow;
    width:150px;
}

#lower-center {
    background-color:#ccc;
    height:23%;
    min-height:125px;
    margin:0 auto;
    overflow: scroll;
    overflow-y: hidden ! important;
}
#inner-wrap {
    /*float:left;
    /*margin-right:-32000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
    /*height:60%;*/
    white-space:nowrap;
}
#inner-wrap img { /*For simulating images in Demo only for FF, remove this in working layout*/
                  width:100px;
                  height:100px;
                  background:blue;
                  color:#FFF;
                  margin:20px 10px 0 10px;
                  /*display:inline;*/
                  border: 3px solid #fff;
}

#upper-left img:hover{
    cursor: pointer;
}

#inner-wrap img:hover{
    cursor: pointer;
}

#upper-center div{
    height:100%;
    display:block;
    float:left;
}

#left-upper-center{
    width:78%;
    text-align:center;
}

#left-lower-center{
    width:78%;
    text-align:center;
}

#right-upper-center{
    width:20%;
    border-left: 1px solid #fff;
    overflow: hidden;
    padding-left: 5px;
}

#img-info{
    padding-top:80px;
    padding-left:10px;
}

span.super{
    vertical-align:super;
}

#uploadFile{
    height: 70% !important;
    padding-top: 30px;   
}

.click:hover{
    cursor: pointer;
}